<template>
  <div class="personal">
    <div class="banxin">
      <Breadcrumb :arr="navs"></Breadcrumb>
      <div class="container flex">
        <!-- 侧边栏 -->
        <aside>
          <div class="user">
            <div class="img">
              <!-- <img src="../assets/images/userImg.png" alt="" /> -->
              <img :src="$store.state.userInfo.headImg" alt="" />
            </div>
            <div class="flex">
              <!-- 用户名 -->
              <span>{{ $store.state.userInfo.nickName }}</span>
              <!-- 退出 -->
              <span class="exit" @click="exit">退出</span>
            </div>
          </div>
          <!-- 交易 -->
          <div class="jiaoyi list">
            <h3>
              <img src="../assets/images/person/transaction.png" alt="" />
              <span>交易管理</span>
            </h3>
            <ul>
              <li
                @click="$router.push('/personal/user')"
                :class="{ active: /\/user/.test($route.path) }"
              >
                <span>个人中心</span>
              </li>
              <li :class="{ active: /\/order/.test($route.path) }">
                <span>我的订单</span>
              </li>
              <li
                @click="$router.push('/personal/cart')"
                :class="{ active: /\/cart/.test($route.path) }"
              >
                <span>购物车</span>
              </li>
              <li :class="{ active: /\/msg/.test($route.path) }">
                <span>消息通知</span>
              </li>
              <li :class="{ active: /\/coin/.test($route.path) }">
                <span>鸡腿明细</span>
              </li>
              <li :class="{ active: /\/gonglue/.test($route.path) }">
                <span>鸡腿攻略</span>
              </li>
            </ul>
          </div>
          <div class="info list">
            <h3>
              <img src="../assets/images/person/transaction.png" alt="" />
              <span>个人信息管理</span>
            </h3>
            <ul>
              <li>个人中心</li>
              <li>我得订单</li>
            </ul>
          </div>
        </aside>
        <div class="right">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import Breadcrumb from "../components/common/Breadcrumb.vue";
export default {
  data() {
    return {
      navs: [
        { path: "./home", text: "首页" },
        { path: "./personal", text: "个人中心" },
      ],
    };
  },
  components: {
    Breadcrumb,
  },
  methods: {
    exit() {
      // 退出： 清空token 、vuex userInfo 跳转到home
      localStorage.removeItem("x-auth-token");
      this.$store.commit("updataInfo", null);
      this.$router.push("/home");
      // 可以把tophead里面的数据和vuex绑定 耶可以强制更新tophead组件
      this.$store.commit("updateTopHeadKey");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.personal {
  .container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
  }
  aside {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #e7e7e7;
    .user {
      text-align: center;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .flex {
      justify-content: center;
      span {
        margin-right: 15px;
        line-height: 50px;
        &.exit {
          color: blue;
          cursor: pointer;
        }
      }
    }
    .list {
      h3 {
        display: flex;
        height: 40px;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }
      ul {
        li {
          line-height: 34px;
          height: 34px;
          font-size: 14px;
          cursor: pointer;
          &.active {
            span {
              border-left: 1px solid #4488ff;
              color: #4488ff;
              padding-left: 10px;
            }
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 20px;
  }
}
</style>